首先，建立一個repository用來儲存網頁的所有內容。
建立完repository後新增檔案index.html，這時候到Settings>Pages>Branch將branch改為main，改完之後看到一串網址準備就完成了。

開始之前先把CSS檔加到文件裡

<link rel="stylesheet" href="css檔案位置" type="text/css" />

這裡順帶一提，更新CSS檔後需要等一段時間才會反映到網頁上，這時可以利用開發人員工具，在Sourse裡找到CSS檔案做修改，這樣可以即時預覽更新之後的效果，達到想要的效果之後再更新到GitHub上。

一開始先從最主要的部份做起，先加入預定的背景圖，這裡希望可以達到圖片滿版縮放不變形和背景模糊兩種效果。

圖片滿版縮放不變形

body{
  background-image: url( 圖片路徑 );
  background-position: center;
  background-size: cover;
}

因為準備的圖片夠大，這裡把background-size設定為cover可以直接達到我想要的效果。

背景模糊

body{
  backdrop-filter: blur( 2.5px);
}

backdrop-filter可以把圖片加上特效，這裡設定為blur就能簡單達到模糊效果，除了模糊以外的效果可以參考 MDN-backdrop-filter。

參考資料/延伸閱讀
1. ithelp
2. medium@RUE503
3. www.casper.tw